<template>
	<view class="sharePop" :class="{'active': showPop}">
		<view class="s_bg" @tap="closePop"></view>
		<view class="s_box">
			<view class="s_bTop">
				<view class="s_bShare">
					<view class="s_bIcon iconfont icon-friend"></view>
					<view class="s_bTxt">分享给好友</view>
				</view>
				<view class="s_bPicture" @tap="toPicture">
					<view class="s_bIcon iconfont icon-picture"></view>
					<view class="s_bTxt">生成分享大图</view>
				</view>
			</view>
			<view class="s_bBtm">
				<view class="s_bClose" @tap="closePop">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			
		}
	},
	
	props: {
		showPop: { type: [String, Boolean], default: false }
	},
	
	methods: {
		//
		toPicture() {
			this.$emit('toPicture')
		},
		closePop() {
			this.$emit('closePop')
		}
	},
}
</script>

<style lang="scss">
.sharePop {width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;z-index: 1000;visibility: hidden;transition: visibility .3s;
	&.active {visibility: visible;
		.s_bg {opacity: 1;}
		.s_box {transform: translateY(0);}
	}
	.s_bg {width: 100%;height: 100%;background: rgba(0, 0, 0, .6);opacity: 0;transition: opacity .3s;}
	.s_box {width: 100%;position: absolute;bottom: 0;left: 0;transform: translateY(100%);transition: transform .3s;}
	.s_bTop {height: 286rpx;border-radius: 16rpx 16rpx 0 0;background: #f6f7f8;display: flex;justify-content: space-around;}
	.s_bShare, .s_bPicture {padding: 0 80rpx;
		&:active {opacity: .88;}
	}
	.s_bIcon {width: 112rpx;height: 112rpx;color: #fff;font-size: 72rpx;margin: 60rpx auto 0;border-radius: 50%;background: #8bc37a;box-shadow: 0 0 12rpx rgba(0, 0, 0, .16);display: flex;justify-content: center;align-items: center;}
	.s_bPicture.s_bIcon {background: #ffd425;}
	.s_bTxt {height: 34rpx;line-height: 34rpx;text-align: center;color: #939393;font-size: 24rpx;margin-top: 16rpx;}
	.s_bBtm {height: 88rpx;line-height: 88rpx;text-align: center;font-size: 32rpx;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);background: #fff;}
}

	
	
</style>
